﻿@page "/chart/accumulation-distribution-indicator"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates a stock chart with candle series and an accumulation distribution indicator. The trackball shows the information about the stock and signal value of a day.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure an accumulation distribution indicator. The accumulation distribution indicator is a volume-based indicator designed to measure the accumulative flow of money into and out of a stock.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the accumulation distribution indicator can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/stock-chart/technical-indicators/#accumulation-distribution'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="AAPL - 2012-2017" Theme="@Theme">
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Title="Months" IntervalType="IntervalType.Months" ZoomFactor="0.2" ZoomPosition="0.6">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Price" LabelFormat="${value}" Minimum="50"
                           Maximum="170" PlotOffset="25" Interval="30" RowIndex="1" OpposedPosition="true">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartAxes>
            <ChartAxis Name="secondary" OpposedPosition="true" RowIndex="0" Interval="6000000000"
                       Minimum="-7000000000" Maximum="5000000000" Title="Accumulation Distribution (in Billion)">
                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
                <ChartStriplines>
                    <ChartStripline ZIndex="ZIndex.Behind" Start="-7000000000" End="6000000000" Text="" Color="#6063ff" Visible="true" Opacity="0.1"></ChartStripline>
                </ChartStriplines>
            </ChartAxis>
        </ChartAxes>
        <ChartRows>
            <ChartRow Height="40%"></ChartRow>
            <ChartRow Height="60%"></ChartRow>
        </ChartRows>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartZoomSettings EnablePinchZooming="true" EnableSelectionZooming="true" Mode="ZoomMode.X"></ChartZoomSettings>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Period" Low="Low" High="High" Close="Close" Volume="Volume" Open="Open"
                         Width="2" Name="Apple Inc" Type="ChartSeriesType.Candle" BearFillColor="#2ecd71" BullFillColor="#e74c3d">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartIndicators>
            <ChartIndicator Type="TechnicalIndicators.AccumulationDistribution" Field="FinancialDataFields.Close" SeriesName="Apple Inc" YAxisName="secondary" Fill="#6063ff" Period="3">
            </ChartIndicator>
        </ChartIndicators>
        <ChartEvents OnAxisLabelRender="AxisLabelRender"></ChartEvents>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public ADIChartData[] ChartPoints { get; set; } = new ADIChartData[] { };

    protected override void OnInitialized()
    {
        ChartPoints = JsonConvert.DeserializeObject<ADIChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/chart/financial-data.json"));
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public void AxisLabelRender(AxisLabelRenderEventArgs args)
    {
        if(args.Axis.Name == "secondary")
        {
            args.Text = Convert.ToDouble(args.Text) / 1000000000 + "B";
        }
    }

    public class ADIChartData
    {
        public DateTime Period { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
    }
}
